{% extends 'custom_base_site.html' %}
{% block chart %}
    <script src="/static/vue/vue.js"></script>

    <link rel="stylesheet" href="/static/vue-element/vue-element.css">
    <script src="/static/vue-element/vue-element.js"></script>

    <script src="/static/highcharts/highcharts.js"></script>
    <script src="/static/highcharts/highcharts-more.js"></script>
    <script src="/static/highcharts/modules/exporting.js"></script>
    <script src="/static/highcharts/modules/export-data.js"></script>
    <script src="/static/highcharts/modules/oldie.js"></script>
    <script src="/static/highcharts/modules/drilldown.js"></script>

    <script src="/static/moment/moment.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
    <script src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/static/html-util.js"></script>
    <script src="/static/string-format.js"></script>

    <!-- chart -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <!-- chart end -->
    <div class="form-inline">
        <!-- store selector -->
        <select id="store-selector" class="selectpicker" data-width="fit">
            {% for store in stores %}
                <option data-tokens="{{ store.id | safe }}"
                        value="{{ store.id | safe }}">{{ store.title | safe }}</option>
            {% endfor %}
        </select>
        <script>
            // init set
            let store = "{{ store_selector_init.id | safe }}";  // amount interests
            $storeSelector = $("#store-selector");
            $storeSelector.selectpicker('val', store);
        </script>
        <!-- store selector end -->

        <!-- target selector -->
        <select id="target-selector" class="selectpicker" data-width="fit">
            <option data-tokens="amount" value="amount">销售额</option>
            <option data-tokens="amount" value="quantity">销量</option>
            <option data-tokens="interests" value="interests">毛利润</option>
        </select>
        <script>
            // init set
            let target = "amount";  // amount interests
            $targetSelector = $("#target-selector");
            $targetSelector.selectpicker('val', target);
        </script>
        <!-- target selector end -->

        <!-- date picker -->
        <div class='input-group date' id='datetimepicker-start'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class='input-group date' id='datetimepicker-end'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <script>
            let start = moment().startOf('year'),
                end = moment();
            // moment(new Date()) moment().toDate()
            $dp_start = $('#datetimepicker-start');
            $dp_end = $('#datetimepicker-end');
            $dp_start.datetimepicker({
                format: 'YYYY-MM-DD',
                showTodayButton: true,
                defaultDate: start,
            });
            $dp_end.datetimepicker({
                format: 'YYYY-MM-DD',
                showTodayButton: true,
                defaultDate: end,
            });
            $dp_start.on("dp.change", function (event) {
                // event.date instanceof moment === true
                $dp_end.data("DateTimePicker").minDate(event.date);
            });
            $dp_end.on("dp.change", function (event) {
                // event.date instanceof moment === true
                $dp_start.data("DateTimePicker").maxDate(event.date);
            });
        </script>
        <!-- date picker end -->
        <!-- bootstrap class form-group input-group -->
    </div>
    <script type="text/javascript">
        $(function () {
        });

        let scheme = "",
            domain = "",
            base_url = "{scheme}{domain}".format({"scheme": scheme, "domain": domain}),
            bath_path = "/api-analysis/sale_label",
            para_path = "/store/{store}/target/{target}/from/{start}/to/{end}".format({
                "store": store,
                "target": target,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            }),
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
        // scheme domain path     `https://`  `www.redfoxatasleep.com`  `/base/path`  `/para/path`  `?key=stringValue`


        let chart, chartOptions, min, max, response;
        $.get(url, function (data, status) {
            response = data;
            min = new Date(response["min"]);
            max = new Date(response["max"]);
            $dp_start.data("DateTimePicker").minDate(min);
            $dp_end.data("DateTimePicker").maxDate(max);

            chartOptions = {
                "chart": {
                    "type": 'column',
                },
                "title": {
                    "text": "Sale {0} With Label".format({
                        "amount": "Amount",
                        "interests": "Interests",
                        "quantity": "Quantity",
                    }[target])
                },
                "xAxis": {
                    "type": "category",
                },
                "plotOptions": {
                    "series": {
                        "borderWidth": 0,
                        "dataLabels": {
                            "enabled": true
                        }
                    },
                    "pie": {
                        "allowPointSelect": true,
                        "cursor": 'pointer',
                        "dataLabels": {
                            "enabled": true,
                            "format": '<b>{point.name}</b>: {point.percentage:.1f} %',
                        }
                    }
                },
                "legend": {
                    "enabled": false,
                },
                "series": [{
                    "name": "Series",
                    "colorByPoint": true,
                    "data": response["series_data"]
                }],
                "drilldown": {
                    "series": response["drilldown_series"]
                }
            };
            chart = Highcharts.chart('container', chartOptions);

            $dp_start.on("dp.change", function (event) {
                chart.drillUp();
                // event.date instanceof moment === true
                start = event.date;
                para_path = "/store/{store}/target/{target}/from/{start}/to/{end}".format({
                    "store": store,
                    "target": target,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.update({
                        "series": [{
                            "name": "Series",
                            "colorByPoint": true,
                            "type": "column",
                            "data": data["series_data"]
                        }],
                        "drilldown": {
                            "series": data["drilldown_series"]
                        }

                    });
                });
            });
            $dp_end.on("dp.change", function (event) {
                chart.drillUp();
                // event.date instanceof moment === true
                end = event.date;
                para_path = "/store/{store}/target/{target}/from/{start}/to/{end}".format({
                    "store": store,
                    "target": target,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.update({
                        "series": [{
                            "name": "Series",
                            "colorByPoint": true,
                            "type": "column",
                            "data": data["series_data"]
                        }],
                        "drilldown": {
                            "series": data["drilldown_series"]
                        }

                    });
                });
            });

            $targetSelector.on(
                'changed.bs.select',
                function (e, clickedIndex, isSelected, previousValue) {
                    chart.drillUp();
                    let selectedOption = event.target[clickedIndex];
                    target = selectedOption.value;
                    // event.date instanceof moment === true
                    para_path = "/store/{store}/target/{target}/from/{start}/to/{end}".format({
                        "store": store,
                        "target": target,
                        "start": start.format("YYYY-MM-DD"),
                        "end": end.format("YYYY-MM-DD")
                    });
                    url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                    $.get(url, function (data, status) {
                        // data: response from server
                        chart.update({
                            "title": {
                                "text": "Sale {0} With Label".format({
                                    "amount": "Amount",
                                    "interests": "Interests",
                                    "quantity": "Quantity",
                                }[target])
                            },
                            "series": [{
                                "name": "Series",
                                "colorByPoint": true,
                                "type": "column",
                                "data": data["series_data"]
                            }],
                            "drilldown": {
                                "series": data["drilldown_series"]
                            }

                        });
                    });

                }
            );
            $storeSelector.on(
                'changed.bs.select',
                function (e, clickedIndex, isSelected, previousValue) {
                    chart.drillUp();
                    let selectedOption = event.target[clickedIndex];
                    store = selectedOption.value;
                    // event.date instanceof moment === true
                    para_path = "/store/{store}/target/{target}/from/{start}/to/{end}".format({
                        "store": store,
                        "target": target,
                        "start": start.format("YYYY-MM-DD"),
                        "end": end.format("YYYY-MM-DD")
                    });
                    url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                    $.get(url, function (data, status) {
                        // data: response from server
                        chart.update({
                            "series": [{
                                "name": "Series",
                                "colorByPoint": true,
                                "type": "column",
                                "data": data["series_data"]
                            }],
                            "drilldown": {
                                "series": data["drilldown_series"]
                            }
                        });
                    });

                }
            );


        });

    </script>



{% endblock %}

